<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width maximum-scale=1 initial-scale=1 user-scalable=no">
<title>Syntax highlighting</title>
<style>
body {
    background-color: #ddd;
    font-family: 'Helvetica Neue', HelveticaNeue, sans-serif;
    text-shadow: white 0px 1px 1px;
}

#expression {
    background-color: #fff;
    width: 95%;
    font-family: monospace;
    font-size: 1.3em;
    border: 1px solid #bbb;
    border-radius: 0.5em;
    margin: 0;
    text-shadow: none;
    padding: 0.2em 0.3em 0.2em 0.4em;
    white-space: pre-wrap;
}

span.Number {
    color: green;
}

span.Identifier {
    color: blue;
}

span.Operator {
    color: #333;
}

span.blank {
    color: #555;
}

span.cursor {
    border-left: 1px solid #333;
    position: absolute;
    opacity: 1;
}

span.error {
    color: red;
}

span.selected {
    background-color: Highlight !important;
    color: HighlightText !important;
}

.footer {
    text-shadow: none;
    font-size: 0.8em;
    color: #888;
    margin-top: 2em;
}

</style>
</head>
<body spellcheck="false">

    <p>Syntax highlighted expression editor:</p>

    <div id="expression"></div>

    <p class="footer">Supported tested browsers: Firefox&nbsp;4+,
    Safari&nbsp;5+, Chrome&nbsp;9+, Opera&nbsp;11+, Konqueror&nbsp;4.6+.</p>

    <script src="TapDigit.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = new TapDigit.Editor(document.getElementById('expression'));
        editor.focus();
    </script>

</body>
</html>
